<template>
  <div class="paper">
    <!--过滤器-->
    <div class="filter-container">
      <div class="filter-item item-input">
        <el-input v-model="paperInput" placeholder="请输入试卷名称"></el-input>
      </div>
      <div class="filter-item item-button">
        <el-button type="primary" @click="getAllPaper"><i class="el-icon-search"></i> 搜索</el-button>
      </div>
      <div class="filter-item item-button">
        <el-button type="primary" @click="refreshPaper"><i class="el-icon-refresh"></i> 刷新</el-button>
      </div>
      <div class="filter-item item-button">
        <el-button type="primary" @click=" createPaper"><i class="el-icon-s-flag"></i> 创建试卷</el-button>
      </div>
    </div>
    <!--试卷列表，分页处理-->
    <div class="paper-list">
      <el-table
          :data="paperDetail"
          border
          style="width: 100%" v-loading="paperListLoading">
        <el-table-column
            label="序号"
            width="70"
            align="center">
          <template v-slot="scope" v-if="paperDetail.length > 0 ">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column
            prop="title"
            label="试卷名称"
            width="320"
            align="center">
          <template v-slot="scope">
            <span class="col2-cell-style" @click="requestPaperDetail(scope.row.id)">{{ scope.row.title }}</span>
          </template>
        </el-table-column>
        <el-table-column
            prop="creatorId"
            label="创建人"
            width="280"
            align="center">
        </el-table-column>
        <el-table-column
            prop="companyId"
            label="公司"
            width="120"
            align="center">
        </el-table-column>
        <el-table-column
            prop="createTime"
            label="创建时间"
            width="120"
            align="center">
        </el-table-column>
        <el-table-column
            prop="num"
            label="数量"
            width="120"
            align="center">
        </el-table-column>

        <el-table-column
            prop="disabled"
            label="状态"
            width="110"
            align="center">
          <template v-slot="scope">
            <el-tag v-if="scope.row.disabled == true" type="success" disable-transitions>使用中</el-tag>
            <el-tag v-if="scope.row.disabled == false" type="danger" disable-transitions>已禁用</el-tag>
            <el-tag v-if="scope.row.disabled == null" type="danger" disable-transitions>状态位为空</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="360">
          <template v-slot="scope">
            <el-button
                size="mini"
                type="danger"
                @click="DelPaper(scope.row.id)">删除
            </el-button>
            <el-button
                size="mini"
                type="primary"
                v-if="scope.row.disabled=== true||scope.row.disabled==null"
                @click="toUpdatePaperDialog(scope.row)">修改试卷
            </el-button>
            <el-button
                size="mini"
                type="success"
                v-if="scope.row.disabled === false"
                @click="usePaper(scope.row.id)">使用试卷
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>


    <el-dialog title="创建试卷" v-model="toCreatePaper" top="2vh" fullscreen>
      <el-steps :active="toCreatePaperStep" finish-status="success" align-center>
        <el-step title="命名试卷" :icon="Edit"/>
        <el-step title="选择客观题目" :icon="InfoFilled"/>
        <el-step title="选择主观题目" :icon="InfoFilled"/>
      </el-steps>
      <div v-show="toCreatePaperStep==0">
        <el-form ref="paperForm" :model="paperForm" status-icon :rules="paperRules">
          <el-form-item label="试卷名称" :label-width="formLabelWidth" prop="name">
            <el-input v-model="paperForm.title" autocomplete="off" placeholder="请输入试卷名称"
                      style="width: 550px"></el-input>
          </el-form-item>
          <el-form-item label="主观题目数量" :label-width="formLabelWidth" prop="questSum">
            <el-input-number v-model="objectQuestionNum" @change="handleNumChange" :min="1" :max="20"
                             label="题目数量"></el-input-number>
            <span style="margin-left: 20px">设置主观题目分值：  <el-input-number v-model="objectQuestionScore"
                                                                                @change="handleNumChange" :min="1"
                                                                                :max="20"
                                                                                label="题目数量"></el-input-number></span>
          </el-form-item>
          <el-form-item label="客观题目数量" :label-width="formLabelWidth" prop="questSum">
            <el-input-number v-model="subjectiveQuestionNum" @change="handleNumChange" :min="1" :max="20"
                             label="题目数量"></el-input-number>
            <span style="margin-left: 20px">设置客观题目分值：  <el-input-number v-model="subjectiveQuestionScore"
                                                                                @change="handleNumChange" :min="1"
                                                                                :max="20"
                                                                                label="题目数量"></el-input-number></span>
          </el-form-item>
          <el-form-item label="试卷总分：" :label-width="formLabelWidth" prop="questSum">
            <el-tag>{{ totalScore }}分</el-tag>
          </el-form-item>
        </el-form>
      </div>


      <div v-show="toCreatePaperStep==1">
        <div class="category">
          <h1>题目类别选择</h1>
          <el-row :gutter="20">
            <el-col :span="8">
              <!--<el-select-->
              <!--    v-model="value"-->
              <!--    class="m-2"-->
              <!--    placeholder="Select"-->
              <!--    size="large"-->
              <!--    style="width: 240px"-->
              <!--&gt;-->
              <!--  <el-option-->
              <!--      v-for="item in options"-->
              <!--      :key="item.value"-->
              <!--      :label="item.label"-->
              <!--      :value="item.value"-->
              <!--  />-->
              <!--</el-select>-->
            </el-col>
            <!--tag选择-->
            <el-col :span="6">
              <el-input v-model="subjectiveQuestionParams.keyword" placeholder="请输入题号或者题目名"/>
            </el-col>
            <el-col :span="2">
              <el-button type="primary" style="margin-left: 20px" round @click="getAllQuestion">搜索</el-button>
            </el-col>
          </el-row>

        </div>
        <!-- 分类 -->

        <!-- 搜索题号 -->
        <el-row :gutter="20">

          <el-col :span="6">
            <el-card class="box-card-process">
              <el-progress type="dashboard"
                           :percentage="((selectSubjectiveQuestionNum/subjectiveQuestionNum)*100).toFixed(2)"
                           stroke-width="24" width="250" class="subjectNumProcess">
                <template #default="{ percentage }">

                  <span class="percentage-label">已选客观题数量:{{ seleceSubjectiveQuestionNum }}</span>
                  <P class="percentage-value">进度：{{ percentage }}%</P>

                </template>
              </el-progress>
              <el-card shadow="always"><span class="needSubjectiveQuestionNum">需要客观题数量:{{
                  subjectiveQuestionNum
                }}</span>
              </el-card>

            </el-card>
          </el-col>

          <el-col :span="18">
            <el-card class="box-card">
              <el-table
                  ref="tableRef"
                  :data="AllSubjectQuestion"
                  style="width: 100%"
                  v-loading="subjectLoading"
              >
                <el-table-column
                    label="详情"
                    sortable
                    width="150"
                    column-key="date"
                    type="expand"
                >
                  <template #default="props">
                    <div class="questionInfo">
                      <p style="text-align: left;">
                        <span style="font-size: 20px;font-weight: bold">题目暗示：</span>
                        <span class="questionText">{{ props.row.hint }}</span></p>
                      <p style="text-align: left; ">
                        <span style="font-size: 18px;font-weight: bold">正确答案：</span>
                        <span class="questionText">{{ props.row.answer }}</span>
                      </p>
                      <p style="text-align: left;">
                        <span style="font-size: 18px;font-weight: bold">选择:</span>
                        <el-tag v-for="item in props.row.itemList">
                          {{ item.option }}:{{ item.text }}
                        </el-tag>
                      </p>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                    prop="id"
                    label="题号"
                    sortable
                    width="150"
                    column-key="date"
                >
                </el-table-column>
                <el-table-column
                    prop="title"
                    label="题目"
                    width="200">
                </el-table-column>
                <el-table-column label="状态">
                  <template #default="scope">
                    <el-tag type="success" v-if="scope.row.selected==true"
                            size="small"
                    >已选择
                    </el-tag>
                    <el-tag v-if="scope.row.selected==false"
                            size="small"
                    >未选择
                    </el-tag>
                  </template>
                </el-table-column>
                <el-table-column label="操作">
                  <template #default="scope">
                    <el-button v-if="scope.row.selected==false"
                               size="small"
                               type="success"
                               @click="selectSubjectiveQuestion(scope.row.id)">添加
                    </el-button>
                    <el-button v-if="scope.row.selected==true"
                               type="danger"
                               size="small"
                               @click="cancleSelectSubjectiveQuestion(scope.row.id)">移除
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>

              <div class="pagination">
                <el-pagination
                    @size-change="getAllQuestion"
                    @current-change="getAllQuestion"
                    :current-page="subjectiveQuestionParams.current"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size="subjectiveQuestionParams.size"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="SubjectiveQuestionTotal">
                </el-pagination>
              </div>
            </el-card>
          </el-col>

          <!-- 表格 -->

        </el-row>


      </div>


      <div v-show="toCreatePaperStep==2">
        <div class="category">
          <h1>题目类别选择</h1>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-tree-select
                  v-model="questionParams.categoryId"
                  :data="AllQuestionCategory"
                  check-strictly
                  :render-after-expand="false"
                  show-checkbox
                  check-on-click-node
                  style=""
              />
            </el-col>
            <!--tag选择-->
            <el-col :span="4">
              <el-select
                  v-model="questionParams.tagId"
                  class="m-2"
                  placeholder="Select"
                  style="width: 240px"
              >
                <el-option
                    v-for="item in AllQuestionTag"
                    :key="item.problemTagId"
                    :label="item.problemTagName"
                    :value="item.problemTagId"
                />
              </el-select>
            </el-col>
            <el-col :span="6">
              <el-input v-model="questionParams.keyword" placeholder="请输入题号或者题目名"/>
            </el-col>
            <el-col :span="2">
              <el-button type="primary" style="margin-left: 20px" round @click="getAllQuestion">搜索</el-button>
            </el-col>
          </el-row>

        </div>
        <!-- 分类 -->

        <!-- 搜索题号 -->
        <el-row :gutter="20">

          <el-col :span="6">
            <el-card class="box-card-process">
              <el-progress type="dashboard"
                           :percentage="((selectObjectiveQuestionNum/subjectiveQuestionNum)*100).toFixed(2)"
                           stroke-width="24" width="250" class="subjectNumProcess">
                <template #default="{ percentage }">
                  <span class="percentage-label">已选主观题数量:{{ selectObjectiveQuestionNum }}</span>
                  <P class="percentage-value">进度：{{ percentage }}%</P>

                </template>
              </el-progress>
              <el-card shadow="always"><span class="needSubjectiveQuestionNum">需要主观题数量:{{
                  objectQuestionNum
                }}</span></el-card>

            </el-card>
          </el-col>

          <el-col :span="18">
            <el-card class="box-card">
              <el-table
                  ref="tableRef"
                  :data="AllQuestion"
                  style="width: 100%"
                  v-loading="objectLoading"
              >
                <el-table-column
                    label="详情"
                    sortable
                    width="150"
                    column-key="date"
                    type="expand"
                >
                  <template #default="props">
                    <div class="questionInfo">
                      <p style="text-align: left;">
                        <span style="font-size: 20px;font-weight: bold">题目描述：</span>
                        <span class="questionText">{{ props.row.description }}</span></p>
                      <p style="text-align: left; ">
                        <span style="font-size: 18px;font-weight: bold">输入示例：</span>
                        <span class="questionText">{{ props.row.inputFormat }}</span>
                      </p>
                      <p style="text-align: left;">
                        <span style="font-size: 18px;font-weight: bold">输出示例：</span>
                        <span class="questionText">{{ props.row.outputFormat }}</span>
                      </p>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                    prop="problemId"
                    label="题号"
                    sortable
                    width="150"
                    column-key="date"
                >
                </el-table-column>
                <el-table-column
                    prop="problemName"
                    label="题目"
                    width="200">
                </el-table-column>
                <el-table-column
                    prop="problemCategories"
                    label="分类"
                    width="150">
                </el-table-column>
                <el-table-column
                    prop="problemTags"
                    label="难易"
                    width="150"
                >
                  <template #default="scope">
                    <el-tag
                        :type="tagColor(scope.row.problemTags)"
                        disable-transitions
                    >{{ scope.row.problemTags }}
                    </el-tag
                    >
                  </template>
                </el-table-column>
                <el-table-column label="状态">
                  <template #default="scope">
                    <el-tag type="success" v-if="scope.row.selected==true"
                            size="small"
                    >已选择
                    </el-tag>
                    <el-tag v-if="scope.row.selected==false"
                            size="small"
                    >未选择
                    </el-tag>
                  </template>
                </el-table-column>
                <el-table-column label="操作">
                  <template #default="scope">
                    <el-button v-if="scope.row.selected==false"
                               size="small"
                               type="success"
                               @click="selectObjectQuestion(scope.row.problemId)">添加
                    </el-button>
                    <el-button v-if="scope.row.selected==true"
                               type="danger"
                               size="small"
                               @click="cancleSelectObjectQuestion(scope.row.problemId)">移除
                    </el-button>
                  </template>
                </el-table-column>

              </el-table>

              <div class="pagination">
                <el-pagination
                    @size-change="getAllQuestion"
                    @current-change="getAllQuestion"
                    :current-page="questionParams.current"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size="questionParams.size"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="questionTotal">
                </el-pagination>
              </div>
            </el-card>
          </el-col>

          <!-- 表格 -->

        </el-row>


      </div>


      <div slot="footer" class="dialog-footer" v-show="toCreatePaperStep==0">
        <el-button @click="toCreatePaperStep =toCreatePaperStep+1">下一步</el-button>
      </div>
      <div slot="footer" class="dialog-footer" v-show="toCreatePaperStep==1">
        <el-button @click="toCreatePaperStep =toCreatePaperStep-1">上一步</el-button>
        <el-button @click="toCreatePaperStep =toCreatePaperStep+1">下一步</el-button>
      </div>
      <div slot="footer" class="dialog-footer" v-show="toCreatePaperStep==2">
        <el-button @click="toCreatePaperStep =toCreatePaperStep-1">上一步</el-button>
        <el-button @click="createExamPaper">创建</el-button>
      </div>
    </el-dialog>


    <el-dialog title="修改试卷" v-model="toUpdatePaper" top="2vh" fullscreen>

      <el-form ref="paperForm" :model="paperForm" status-icon :rules="paperRules">
        <el-form-item label="试卷名称" :label-width="formLabelWidth" prop="name">
          <el-input v-model="updatePaperObj.title" autocomplete="off" placeholder="请输入试卷名称"
                    style="width: 550px"></el-input>
        </el-form-item>
        <el-form-item label="主观题目数量" :label-width="formLabelWidth" prop="questSum">
          <el-input-number v-model="updatePaperProcess.questionNum" @change="handleNumChange" :min="1" :max="200000"
                           label="题目数量"></el-input-number>
          <span style="margin-left: 20px">设置主观题目分值：  <el-input-number v-model="updatePaperProcess.questionScore"
                                                                              @change="handleNumChange" :min="1"
                                                                              :max="20"
                                                                              label="题目数量"></el-input-number></span>
        </el-form-item>
        <el-form-item label="客观题目数量" :label-width="formLabelWidth" prop="questSum">
          <el-input-number v-model="updatePaperProcess.subjectQuestionNum" @change="handleNumChange" :min="1" :max="20"
                           label="题目数量"></el-input-number>
          <span style="margin-left: 20px">设置客观题目分值：  <el-input-number
              v-model="updatePaperProcess.subjectQuestionScore"
              @change="handleNumChange" :min="1"
              :max="20"
              label="题目数量"></el-input-number></span>
        </el-form-item>
        <el-form-item label="试卷总分：" :label-width="formLabelWidth" prop="questSum">
          <el-tag>
            {{
              updatePaperProcess.questionNum * updatePaperProcess.questionScore + updatePaperProcess.subjectQuestionScore * updatePaperProcess.subjectQuestionNum
            }}分
          </el-tag>
        </el-form-item>
      </el-form>

      <!-- ！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！修改客观题块！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！-->
      <div class="updateCategory">
        <h1>题目类别选择</h1>
        <el-row :gutter="20">
          <el-col :span="8">
            <!--<el-select-->
            <!--    v-model="value"-->
            <!--    class="m-2"-->
            <!--    placeholder="Select"-->
            <!--    size="large"-->
            <!--    style="width: 240px"-->
            <!--&gt;-->
            <!--  <el-option-->
            <!--      v-for="item in options"-->
            <!--      :key="item.value"-->
            <!--      :label="item.label"-->
            <!--      :value="item.value"-->
            <!--  />-->
            <!--</el-select>-->
          </el-col>
          <!--tag选择-->
          <el-col :span="6">
            <el-input v-model="updateSubjectiveQuestionParams.title" placeholder="请输入题号或者题目名"/>
          </el-col>
          <el-col :span="2">
            <el-button type="primary" style="margin-left: 20px" round @click="getAllSubjectQuestion">搜索</el-button>
          </el-col>
        </el-row>

        <!-- 分类 -->
        <!-- 搜索题号 -->
        <el-row :gutter="20">
          <!--进度显示-->
          <el-col :span="6">
            <el-card class="box-card-process">
              <el-progress type="dashboard"
                           :percentage="((this.updatePaperObj.objectiveQuestions.length/updatePaperProcess.subjectQuestionNum)*100).toFixed(2)"
                           stroke-width="24" width="250" class="subjectNumProcess">
                <template #default="{ percentage }">

                  <span class="percentage-label">已选客观题数量:{{
                      this.updatePaperObj.objectiveQuestions.length
                    }}</span>
                  <P class="percentage-value">进度：{{ percentage }}%</P>
                </template>
              </el-progress>
              <el-card shadow="always"><span class="needSubjectiveQuestionNum">需要客观题数量:{{
                  updatePaperProcess.subjectQuestionNum
                }}</span>
              </el-card>
            </el-card>
          </el-col>

          <el-col :span="9">
            <!--全部客观题-->
            <h2>全部客观题</h2>
            <el-card class="box-card">
              <el-table
                  ref="tableRef"
                  :data="AllUpdateSubjectQuestion"
                  style="width: 100%"
                  v-loading="Loading"
              >
                <el-table-column
                    label="详情"
                    sortable
                    width="90"
                    column-key="date"
                    type="expand"
                >
                  <template #default="props">
                    <div class="questionInfo">
                      <p style="text-align: left;">
                        <span style="font-size: 20px;font-weight: bold">题目暗示：</span>
                        <span class="questionText">{{ props.row.hint }}</span></p>
                      <p style="text-align: left; ">
                        <span style="font-size: 18px;font-weight: bold">正确答案：</span>
                        <span class="questionText">{{ props.row.answer }}</span>
                      </p>
                      <p style="text-align: left;">
                        <span style="font-size: 18px;font-weight: bold">选择:</span>
                        <el-tag v-for="item in props.row.itemList">
                          {{ item.option }}:{{ item.text }}
                        </el-tag>
                      </p>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                    prop="id"
                    label="题号"
                    sortable
                    width="120"
                    column-key="date"
                >
                </el-table-column>
                <el-table-column
                    prop="title"
                    label="题目"
                    width="200">
                </el-table-column>
                <el-table-column label="状态">
                  <template #default="scope">
                    <el-tag type="success" v-if="scope.row.selected==true"
                            size="small"
                    >已选择
                    </el-tag>
                    <el-tag v-if="scope.row.selected==false"
                            size="small"
                    >未选择
                    </el-tag>
                  </template>
                </el-table-column>
                <el-table-column label="操作">
                  <template #default="scope">
                    <el-button v-if="scope.row.selected==false"
                               size="small"
                               type="success"
                               @click="selectSubjectiveQuestion(scope.row)">添加
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>

              <div class="pagination">
                <el-pagination
                    @size-change="getAllUpdateQuestion"
                    @current-change="getAllUpdateQuestion"
                    :current-page="updateSubjectiveQuestionParams.current"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size="updateSubjectiveQuestionParams.size"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="updateSubjectiveQuestionTotal">
                </el-pagination>
              </div>
            </el-card>
          </el-col>
          <el-col :span="9">
            <h2>已选客观题</h2>
            <el-card class="box-card" v-if="updatePaperObj.objectiveQuestions==null">试卷解析已选数据失败</el-card>
            <el-card class="box-card" v-if="updatePaperObj.objectiveQuestions!==null">
              <!--paperDetail.slice((currentPage - 1) * pageSize, currentPage * pageSize)-->
              <el-table
                  ref="tableRef"
                  :data=
                      "updatePaperObj.objectiveQuestions.slice((updateSelectSubjectQuestionPagination.current-1)
                      *updateSelectSubjectQuestionPagination.pageSize,
                      updateSelectSubjectQuestionPagination.current*updateSelectSubjectQuestionPagination.pageSize
            )"
                  style="width: 100%"
                  v-loading="Loading"
              >
                <el-table-column
                    label="详情"
                    sortable
                    width="100"
                    column-key="date"
                    type="expand"
                >
                  <template #default="props">
                    <div class="questionInfo">
                      <p style="text-align: left;">
                        <span style="font-size: 20px;font-weight: bold">题目暗示：</span>
                        <span class="questionText">{{ props.row.hint }}</span></p>
                      <p style="text-align: left; ">
                        <span style="font-size: 18px;font-weight: bold">正确答案：</span>
                        <span class="questionText">{{ props.row.answer }}</span>
                      </p>
                      <p style="text-align: left;">
                        <span style="font-size: 18px;font-weight: bold">选项:</span>
                        <el-tag v-for="item in props.row.itemList">
                          {{ item.option }}:{{ item.text }}
                        </el-tag>
                      </p>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                    prop="id"
                    label="题号"
                    sortable
                    width="100"
                    column-key="date"
                >
                </el-table-column>
                <el-table-column
                    prop="title"
                    label="题目"
                    width="200">
                </el-table-column>
                <el-table-column label="操作">
                  <template #default="scope">
                    <el-button
                        type="danger"
                        size="small"
                        @click="cancleSelectSubjectiveQuestion(scope.row.id)">移除
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>

              <div class="pagination">

                <el-pagination
                    @size-change=" handleSubjectSizeChange"
                    @current-change="handleSubjectPageChange"
                    :current-page="updateSelectSubjectQuestionPagination.current"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size="updateSelectSubjectQuestionPagination.size"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="updatePaperObj.objectiveQuestions===null?0:updatePaperObj.objectiveQuestions.length">
                </el-pagination>
              </div>
            </el-card>
          </el-col>
          <!-- 表格 -->
        </el-row>


      </div>


      <!-- ！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！修改编程题块！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！-->

      <!--编程题-->
      <div class="updateProgrammingCategory">
        <h1>题目类别选择</h1>
        <!--进度-->
        <div style="height: 200px;">
          <!-- 分类 -->
          <el-row :gutter="20">
            <!--进度展示-->
            <el-col :span="6">
              <el-card class="box-card-process">
                <el-progress type="dashboard"
                             :percentage="((this.updatePaperObj.programmingQuestions.length/updatePaperProcess.questionNum)*100).toFixed(2)"
                             stroke-width="14" width="150" class="subjectNumProcess">
                  <template #default="{ percentage }">
                  <span class="percentage-label">已选主观题数量:{{
                      this.updatePaperObj.programmingQuestions.length
                    }}</span>
                    <P class="percentage-value">进度：{{ percentage }}%</P>

                  </template>
                </el-progress>
                <span class="needSubjectiveQuestionNum">需要主观题数量:{{
                    updatePaperProcess.questionNum
                  }}</span>
              </el-card>
            </el-col>
          </el-row>
        </div>
        <!--筛选-->
        <el-row style="margin-bottom: -15px">
          <el-col :span="14">
            <div>
              <el-row :gutter="20">
                <el-col :span="6">
                  <el-tree-select
                      v-model="updateQuestionParams.categoryId"
                      :data="AllQuestionCategory"
                      check-strictly
                      :render-after-expand="false"
                      show-checkbox
                      check-on-click-node
                      style=""
                  />
                </el-col>
                <!--tag选择-->
                <el-col :span="6">
                  <el-select
                      v-model="updateQuestionParams.tagId"
                      class="m-2"
                      placeholder="Select"
                      style="width: 240px"
                  >
                    <el-option
                        v-for="item in AllQuestionTag"
                        :key="item.problemTagId"
                        :label="item.problemTagName"
                        :value="item.problemTagId"
                    />
                  </el-select>
                </el-col>
                <el-col :span="6">
                  <el-input v-model="updateQuestionParams.keyword" placeholder="请输入题号或者题目名"/>
                </el-col>
                <el-col :span="6">
                  <el-button type="primary" style="" round @click="getAllQuestion">搜索</el-button>
                </el-col>
              </el-row>
            </div>
          </el-col>

        </el-row>
        <!--表格-->
        <el-row>
          <!--表格-->
          <el-col :span="12">
            <el-card class="box-card">
              <h2>所有编程题</h2>
              <el-table
                  :default-sort="{ prop: 'problemId', order: 'ascending' }"
                  ref="tableRef"
                  :data="AllUpdateQuestion"
                  style="width: 100%"
                  v-loading="Loading"
              >
                <el-table-column
                    label=""
                    sortable
                    width="50"
                    column-key="date"
                    type="expand"
                >
                  <template #default="props">
                    <div class="questionInfo">
                      <p style="text-align: left;">
                        <span style="font-size: 20px;font-weight: bold">题目描述：</span>
                        <span class="questionText">{{ props.row.description }}</span></p>
                      <p style="text-align: left; ">
                        <span style="font-size: 18px;font-weight: bold">输入示例：</span>
                        <span class="questionText">{{ props.row.inputFormat }}</span>
                      </p>
                      <p style="text-align: left;">
                        <span style="font-size: 18px;font-weight: bold">输出示例：</span>
                        <span class="questionText">{{ props.row.outputFormat }}</span>
                      </p>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                    prop="problemId"
                    label="题号"
                    sortable
                    width="100"
                    column-key="date"
                >
                </el-table-column>
                <el-table-column
                    prop="problemName"
                    label="题目"
                    width="200">
                </el-table-column>
                <el-table-column
                    prop="problemCategories"
                    label="分类"
                    width="150">
                </el-table-column>
                <el-table-column
                    prop="problemTags"
                    label="难易"
                    width="80"
                >
                  <template #default="scope">
                    <el-tag
                        :type="tagColor(scope.row.problemTags)"
                        disable-transitions
                    >{{ scope.row.problemTags }}
                    </el-tag
                    >
                  </template>
                </el-table-column>
                <el-table-column label="状态">
                  <template #default="scope">
                    <el-tag type="success" v-if="scope.row.selected==true"
                            size="small"
                    >已选择
                    </el-tag>
                    <el-tag v-if="scope.row.selected==false"
                            size="small"
                    >未选择
                    </el-tag>
                  </template>
                </el-table-column>
                <el-table-column label="操作">
                  <template #default="scope">
                    <el-button v-if="scope.row.selected==false"
                               size="small"
                               type="success"
                               @click="selectObjectQuestion(scope.row)">添加
                    </el-button>
                  </template>
                </el-table-column>

              </el-table>

              <div class="pagination">
                <el-pagination
                    @size-change="getAllQuestion"
                    @current-change="getAllQuestion"
                    :current-page="updateQuestionParams.current"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size="updateQuestionParams.size"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="updateQuestionTotal">
                </el-pagination>
              </div>
            </el-card>
          </el-col>
          <!--表格-->

          <el-col :span="12">
            <el-card class="box-card" v-if="updatePaperObj.programmingQuestions==null">试卷解析已选数据失败</el-card>
            <el-card class="box-card" v-if="updatePaperObj.programmingQuestions!==null">
              <h2>已选编程题</h2>
              <el-table
                  :default-sort="{ prop: 'problemId', order: 'ascending' }"
                  ref="tableRef"
                  :data="updatePaperObj.programmingQuestions.slice((updateSelectQuestionPagination.current-1)*updateSelectQuestionPagination.pageSize,
                  updateSelectQuestionPagination.current*updateSelectQuestionPagination.pageSize
                  )"
                  style="width: 100%"
                  v-loading="Loading"
              >
                <el-table-column
                    label=""
                    sortable
                    width="50"
                    column-key="date"
                    type="expand"
                >
                  <template #default="props">
                    <div class="questionInfo">
                      <p style="text-align: left;">
                        <span style="font-size: 20px;font-weight: bold">题目描述：</span>
                        <span class="questionText">{{ props.row.description }}</span></p>
                      <p style="text-align: left; ">
                        <span style="font-size: 18px;font-weight: bold">输入示例：</span>
                        <span class="questionText">{{ props.row.inputFormat }}</span>
                      </p>
                      <p style="text-align: left;">
                        <span style="font-size: 18px;font-weight: bold">输出示例：</span>
                        <span class="questionText">{{ props.row.outputFormat }}</span>
                      </p>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                    prop="problemId"
                    label="题号"
                    sortable
                    width="150"
                    column-key="date"
                >
                </el-table-column>
                <el-table-column
                    prop="problemName"
                    label="题目"
                    width="200">
                </el-table-column>
                <el-table-column
                    prop="problemCategories"
                    label="分类"
                    width="150">
                </el-table-column>
                <el-table-column
                    prop="problemTags"
                    label="难易"
                    width="80"
                >
                  <template #default="scope">
                    <el-tag
                        :type="tagColor(scope.row.problemTags)"
                        disable-transitions
                    >{{ scope.row.problemTags }}
                    </el-tag
                    >
                  </template>
                </el-table-column>
                <el-table-column label="操作">
                  <template #default="scope">
                    <el-button
                        type="danger"
                        size="small"
                        @click="cancleSelectObjectQuestion(scope.row)">移除
                    </el-button>
                  </template>
                </el-table-column>

              </el-table>
              <!-- 已选的-->
              <div class="pagination">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handlePageChange"
                    :current-page="updateSelectQuestionPagination.current"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size="updateSelectQuestionPagination.size"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="updatePaperObj.programmingQuestions==null?0:updatePaperObj.programmingQuestions.length">
                </el-pagination>
              </div>
            </el-card>
          </el-col>
        </el-row>

      </div>

      <el-button @click="cancleUpdatePaper">取消修改</el-button>
      <el-button @click="updatePaper">确认修改</el-button>
    </el-dialog>

    <!--查看试卷 对话框-->
    <el-dialog title="查看试卷" v-model:="toViewPaper" top="2vh" width="80%" v-if="viwePaper.length != 0">
      <div class="paper-container">
        <div class="paper-header">
          <!--                    <h1>湘潭大学_____年计算机专业上机考试</h1>-->
          <h1>{{ viwePaper.title }}</h1>
        </div>

        <div class="paper-info">
          <h3>考试总分：{{ viwePaper.objectiveQuestions.length + viwePaper.programmingQuestions.length }}</h3>
          <h3>出卷人：{{ viwePaper.creatorId }}</h3>
          <h3>所属公司：{{ viwePaper.companyId }}</h3>
        </div>
        <h1>客观题</h1>
        <!--试卷内容-->
        <div class="paper-content" v-for="(item, index) in viwePaper.objectiveQuestions" :key="index">
          <h2>第 {{ index + 1 }} 题&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ item.title }}</h2>
          <h4>【问题描述】</h4>
          <p v-html="item.title"></p>
          <h4>【问题提示】</h4>
          <p v-html="item.hint"></p>
        </div>
      </div>
      <h1>编程题</h1>
      <!--试卷内容-->
      <div class="paper-content" v-for="(item, index) in viwePaper.programmingQuestions" :key="index">
        <h2>第 {{ index + 1 }}题
          &nbsp;&nbsp;&nbsp;{{ item.problemName }}&nbsp;&nbsp;所属公司：{{ item.companyName }}</h2>
        <h4>【问题描述】</h4>
        <p v-html="item.description"></p>
        <h4>【问题提示】</h4>
        <p v-html="item.hint"></p>
        <h4>【输入格式】</h4>
        <p v-html="item.inputFormat"></p>
        <h4>【输出格式】</h4>
        <p v-html="item.outputFormat"></p>
        <h4>【输入样例】</h4>
        <p v-html="item.sampleInput"></p>
        <h4>【输出样例】</h4>
        <p v-html="item.sampleOutput"></p>
        <h4>【难度】</h4>
        <p v-html="item.problemTags"></p>
        <h4>【所属类目】</h4>
        <p v-html="item.problemCategories"></p>
        <h4>【输出样例】</h4>
        <p v-html="item.sampleOutput"></p>
        <h4>【输出样例】</h4>
        <p v-html="item.sampleOutput"></p>
      </div>
    </el-dialog>
  </div>


  <el-pagination
      v-model:current-page="search.paging.pageIndex"
      v-model:page-size="search.paging.pageSize"
      :page-sizes="[5, 10, 20, 100]"
      :small="small"
      :disabled="disabled"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      v-model:total="search.paging.totalCount"
      @size-change="getAllPaper"
      @current-change="getAllPaper"
  />
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具 js，第三方插件 js，json 文件，图片文件等等）
// 例如：import  《组件名称》  from '《组件路径》 ';
import Pagination from "@/views/Pagination";
import Api from "@/api/trainer/examPaper"
import ClassApi from "@/api/trainer/examClass"
import UserApi from "@/api/trainer/user"
import CompanyApi from "@/api/trainer/company"
import QuestionApi from "@/api/trainer/question"

export default {
  /*
*                        _oo0oo_
*                       o8888888o
*                       88" . "88
*                       (| -_- |)
*                       0\  =  /0
*                     ___/`---'\___
*                   .' \\|     |// '.
*                  / \\|||  :  |||// \
*                 / _||||| -:- |||||- \
*                |   | \\\  - /// |   |
*                | \_|  ''\---/''  |_/ |
*                \  .-\__  '-'  ___/-. /
*              ___'. .'  /--.--\  `. .'___
*           ."" '<  `.___\_<|>_/___.' >' "".
*          | | :  `- \`.;`\ _ /`;.`/ - ` : | |
*          \  \ `_.   \_ __\ /__ _/   .-` /  /
*      =====`-.____`.___ \_____/___.-`___.-'=====
*                        `=---='
*
*
*      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*
*           师兄的客观和主观单词是反的，勿怪！！！！！！！！！！
*/

  // import 引入的组件需要注入到对象中才能使用
  components: {Pagination},
  props: {},
  data() {
    // 这里存放数据
    return {
      Loading: true,
      paperListLoading: true,
      //创建试卷
      toCreatePaper: false,
      subjectLoading: true,
      objectLoading: true,
      AllQuestion: [],
      AllSubjectQuestion: [],
      AllQuestionCategory: [],
      AllQuestionTag: [],
      AllSubject: [],
      toCreatePaperStep: 0,
      createPaperSuccess: false,
      objectQuestionNum: 0,
      objectQuestionScore: 0,
      subjectiveQuestionNum: 0,
      subjectiveQuestionScore: 0,
      selectSubjectiveQuestionNum: 0,
      selectObjectiveQuestionNum: 0,
      selectSubjectQuestionList: [],
      selectObjectQuestionList: [],
      questionParams: {
        current: 1,
        tagId: null,
        isPublic: null,
        categoryId: null,
        size: 10,
        keyword: null
      },
      subjectiveQuestionParams: {
        current: 1,
        subjectId: null,
        size: 10,
        title: null
      },
      questionTotal: 0,
      SubjectiveQuestionTotal: 0,

      // 修改试卷
      toUpdatePaper: false,
      updatePaperObj: {
        id: null,
        title: null,
        creatorId: null,
        classId: null,
        companyId: null,
        createTime: null,
        num: null,
        disabled: null,
        objectiveQuestions: [],
        programmingQuestions: [],
      },
      AllSelectUpdateProgramQuestion: null,
      AllSelectUpdateSubjectQuestion: null,
      updateQuestionParams: {
        current: 1,
        tagId: null,
        isPublic: null,
        categoryId: null,
        size: 10,
        keyword: null
      },
      updateSubjectiveQuestionParams: {
        current: 1,
        subjectId: null,
        size: 10,
        title: null
      },
      updateQuestionTotal: 0,
      updateSubjectiveQuestionTotal: 0,

      // 修改试卷进度组件
      updatePaperProcess: {
        selectQuestionNum: 0,
        selectSubjectQuestionNum: 0,
        questionNum: 0,
        subjectQuestionNum: 0,
        questionScore: 0,
        subjectQuestionScore: 0,
        totalScore: 0,
      },
      // 修改试卷搜索组件
      AllUpdateQuestion: [],
      AllUpdateSubjectQuestion: [],
      // 已选择试题列表的导航页
      updateSelectQuestionPagination: {
        current: 1,
        pageSize: 10,
      },
      updateSelectSubjectQuestionPagination: {
        current: 1,
        pageSize: 10,
      },

      toViewPaper: false,


      paperRules: {
        name: [
          {required: true, message: '请输入试题名称', trigger: 'blur'},
          {min: 2, max: 30, message: '长度在 2 到 30 个字符', trigger: 'blur'}
        ],
        creator: [
          {required: true, message: '请输入出卷人名字', trigger: 'blur'},
          {min: 2, max: 30, message: '长度在 2 到 30 个字符', trigger: 'blur'}
        ],
        questSum: [
          {required: true, message: '试题数量不能为空', trigger: 'blur'},
          {type: 'number', message: '试题数量必须为数字值', trigger: 'blur'}
        ]
      },
      paperForm: {
        title: null,
        questSum: 0,
        disabled: true,
        totalScore: 0
      },

      search: {
        paging: {
          totalCount: 0,
          pageIndex: 1,
          pageSize: 5,
          enableTotalCount: true
        },
        //  班级排序信息
        sorts: [],
        sortParam: {
          // Ascending Descending
          mode: "Ascending",
          fields: []
        },
        //  搜索其他信息
        condition: {
          title: "",
          classId: null
        },
        extras: {
          key: "",
        }
      },
      paperDetail: [],
      viwePaper: [],
      userInfoTemp: {}
    }
  },
  // 计算属性 类似于 data 概念
  computed: {
    totalScore() {
      const tScore = this.subjectiveQuestionScore * this.subjectiveQuestionNum + this.objectQuestionNum * this.objectQuestionScore
      this.paperForm.totalScore = tScore

      return tScore

    }
  },
  // 监控 data 中的数据变化
  watch: {
    // eslint-disable-next-line vue/no-arrow-functions-in-watch
    subjectiveQuestionNum(val) {
      this.paperForm.questSum = val + this.objectQuestionNum
      console.log(this.paperForm.questSum)
    },
    objectQuestionNum(val) {
      this.paperForm.questSum = val + this.subjectiveQuestionNum
      console.log(this.paperForm.questSum)
    },
    // 已选择的主观
    selectObjectiveQuestionNum(val) {
      let objectQuestionIdList = []
      this.selectObjectQuestionList.forEach(objectQuestion => {
            objectQuestionIdList.unshift({
              problemId: objectQuestion,
              percentage: this.objectQuestionScore / this.totalScore
            })

          }
      )
      this.paperForm.programmingQuestions = objectQuestionIdList
      console.log("主观", this.paperForm.programmingQuestions)
    },
    // 已选择的客观
    selectSubjectiveQuestionNum(val) {
      let subjectiveQuestionIdList = []
      this.selectSubjectQuestionList.forEach(subjectiveQuestion => {
            subjectiveQuestionIdList.unshift({
              id: subjectiveQuestion,
              percentage: this.subjectiveQuestionScore / this.totalScore
            })

          }
      )
      this.paperForm.objectiveQuestions = subjectiveQuestionIdList
      console.log("客观", this.paperForm.objectiveQuestions)
      console.log("客观数组已选", this.selectSubjectQuestionList)
    }
  },
  // 方法集合
  methods: {
    updatePaper() {
      this.updatePaperObj.totalScore=
          this.updatePaperProcess.questionNum *   this.updatePaperProcess.questionScore +
          this.updatePaperProcess.subjectQuestionScore *   this.updatePaperProcess.subjectQuestionNum
      this.updatePaperObj.programmingQuestions.forEach(question=>{

        question.percentage=this.updatePaperProcess.questionScore/this.updatePaperObj.totalScore
        console.log( question.percentage)
      })
      this.updatePaperObj.objectiveQuestions.forEach(question=>{
        question.percentage= this.updatePaperProcess.subjectQuestionScore/this.updatePaperObj.totalScore
      })
      Api.updateExamPaper(this.updatePaperObj).then(res =>{
        if(res.data.success==true){
          this.cancleUpdatePaper()
          this.$message("修改试卷成功")
        }
      })
    },
    cancleUpdatePaper() {
      this.toUpdatePaper = false,
          this.updatePaperObj = {
            id: null,
            title: null,
            creatorId: null,
            classId: null,
            companyId: null,
            createTime: null,
            num: null,
            disabled: null,
            objectiveQuestions: [],
            programmingQuestions: [],
          },
          this.AllSelectUpdateProgramQuestion = null,
          this.AllSelectUpdateSubjectQuestion = null,
          this.updateQuestionParams = {
            current: 1,
            tagId: null,
            isPublic: null,
            categoryId: null,
            size: 10,
            keyword: null
          },
          this.updateSubjectiveQuestionParams = {
            current: 1,
            subjectId: null,
            size: 10,
            title: null
          },
          this.updateQuestionTotal = 0,
          this.updateSubjectiveQuestionTotal = 0,

          // 修改试卷进度组件
          this.updatePaperProcess = {
            selectQuestionNum: 0,
            selectSubjectQuestionNum: 0,
            questionNum: 0,
            subjectQuestionNum: 0,
            questionScore: 0,
            subjectQuestionScore: 0,
            totalScore: 0,
          },
          // 修改试卷搜索组件
          this.AllUpdateQuestion = [],
          this.AllUpdateSubjectQuestion = [],
          // 已选择试题列表的导航页
          this.updateSelectQuestionPagination = {
            current: 1,
            pageSize: 10,
          },
          this.updateSelectSubjectQuestionPagination = {
            current: 1,
            pageSize: 10
          }
    },
    // 禁用试卷
    DelPaper(paperId) {
      Api.paperDetailedInfo(paperId).then(res => {
        if (res.data.success == true) {
          Api.updateExamPaper(res.data.data).then(res => {
            if (res.data.success == true) {
              this.$message.success("禁用试卷成功")
            }
          }).catch(res => {
            this.$message.error("删除试卷删除操作出错了，请联系管理人员")
          })
        }
      }).catch(res => {
        this.$message.error("删除试卷查询要删除的试卷出错了，请联系管理人员")
      })
    },

    // 修改试卷
    toUpdatePaperDialog(paper) {
      Api.paperDetailedInfo(paper.id).then(res => {
        if (res.data.success == true) {
          this.updatePaperObj = res.data.data
          this.getAllQuestionCategory()
          this.getAllQuestionTag()
          this.getAllQuestion()
          this.getAllSubjectQuestion()
          this.updatePaperProcess.questionNum = res.data.data.programmingQuestions.length
          this.updatePaperProcess.subjectQuestionNum = res.data.data.objectiveQuestions.length
          this.toUpdatePaper = true
        }
      }).catch(res => {
        this.$message.error("获取该试卷试题时发生错误，请联系管理员")
      })
    },
    // 修改试卷导航
    handleSizeChange(val) {
      this.updateSelectQuestionPagination.pageSize = val
    },
    handlePageChange(val) {
      this.updateSelectQuestionPagination.current = val
    },
    // 修改试卷导航
    handleSubjectSizeChange(val) {
      this.updateSelectSubjectQuestionPagination.pageSize = val
      console.log("已选客观数量", val)
    },
    handleSubjectPageChange(val) {

      this.updateSelectSubjectQuestionPagination.current = val
    },

    // 清空创建考试试卷信息
    initExamPaper() {
      this.subjectLoading = true
      this.objectLoading = true
      this.AllQuestion = []
      this.AllSubjectQuestion = []
      this.AllQuestionCategory = []
      this.AllQuestionTag = []
      this.AllSubject = []
      this.toCreatePaperStep = 0
      this.createPaperSuccess = false
      this.objectQuestionNum = 0
      this.objectQuestionScore = 0
      this.subjectiveQuestionNum = 0
      this.subjectiveQuestionScore = 0
      this.selectSubjectiveQuestionNum = 0
      this.selectObjectiveQuestionNum = 0
      this.selectSubjectQuestionList = []
      this.selectObjectQuestionList = []
      this.toCreatePaper = false
    },
    // 创建考试试卷
    createExamPaper() {
      let createExamPaperList = []
      createExamPaperList.push(this.paperForm)
      Api.createExamPaper(createExamPaperList).then(res => {
        if (res.data.success == true) {
          this.$message.success("创建试卷成功")
          this.initExamPaper()
          this.getAllPaper()
        }
      })
    },
    // 选择题目
    selectObjectQuestion(param) {
      if (this.toCreatePaper == true) {
        this.selectObjectQuestionList.unshift(param);
        this.AllQuestion = this.AllQuestion.map(question => {
          if (question.problemId === param) {
            // 如果 property 的值为 1，增加 anotherProperty 的值
            question.selected = true;
          }
          return question;
        })
        this.selectObjectiveQuestionNum = this.selectObjectiveQuestionNum + 1;
      } else {
        // 添加选择对象中的数据
        this.updatePaperObj.programmingQuestions.unshift(param)

        this.AllUpdateQuestion = this.AllUpdateQuestion.map(question => {
          if (question.problemId === param.problemId) {
            // 如果 property 的值为 1，增加 anotherProperty 的值
            question.selected = true;
          }
          return question;
        })
      }
    },
    cancleSelectObjectQuestion(param) {
      if (this.toCreatePaper == true) {
        this.selectObjectQuestionList.splice(this.selectObjectQuestionList.indexOf(param), 1)
        this.AllQuestion = this.AllQuestion.map(question => {
          if (question.problemId === param) {
            // 如果 property 的值为 1，增加 anotherProperty 的值
            question.selected = false;
          }
          return question;
        })
        this.selectObjectiveQuestionNum--;
      } else {
        // 移除
        this.updatePaperObj.programmingQuestions = this.updatePaperObj.programmingQuestions.filter(question => question.problemId !== param.problemId)
        // 将全部题目中的disabled换成true
        this.AllUpdateQuestion = this.AllUpdateQuestion.map(question => {
          if (question.problemId === param.problemId) {
            // 如果 property 的值为 1，增加 anotherProperty 的值
            question.selected = false;
          }
          return question;
        })
      }
    },
    // 选择客观题目
    selectSubjectiveQuestion(param) {
      //修改试卷
      if (this.toCreatePaper == true) {
        this.selectSubjectQuestionList.unshift(param);
        this.AllSubjectQuestion = this.AllSubjectQuestion.map(question => {
          if (question.id === param) {
            // 如果 property 的值为 1，增加 anotherProperty 的值
            question.selected = true;
          }
          return question;
        })
        this.selectSubjectiveQuestionNum = this.selectSubjectiveQuestionNum + 1;
      }
      //修改试卷 传的pram是对象TODO
      else {
        // 添加选择对象中的数据
        this.updatePaperObj.objectiveQuestions.unshift(param)

        this.AllUpdateSubjectQuestion = this.AllUpdateSubjectQuestion.map(question => {
          if (question.id === param.id) {
            // 如果 property 的值为 1，增加 anotherProperty 的值
            question.selected = true;
          }
          return question;
        })
      }
    },
    cancleSelectSubjectiveQuestion(param) {
      // 创建试卷
      if (this.toCreatePaper == true) {
        this.selectSubjectQuestionList.splice(this.selectSubjectQuestionList.indexOf(param), 1)
        this.AllSubjectQuestion = this.AllSubjectQuestion.map(question => {
          if (question.id === param) {
            // 如果 property 的值为 1，增加 anotherProperty 的值
            question.selected = false;
          }
          return question;
        })
        this.selectSubjectiveQuestionNum--;
      }
      //修改试卷
      else {
        // 去除选择对象中的数据
        this.updatePaperObj.objectiveQuestions = this.updatePaperObj.objectiveQuestions.filter(question => question.id !== param)
        // 将全部题目中的disabled换成true
        this.AllUpdateSubjectQuestion = this.AllUpdateSubjectQuestion.map(question => {
          if (question.id === param) {
            // 如果 property 的值为 1，增加 anotherProperty 的值
            question.selected = false;
          }
          return question;
        })
      }

    },
    // 创建试卷
    createPaper() {
      this.toCreatePaper = true
      this.getAllQuestionCategory()
      this.getAllQuestionTag()
      this.getAllQuestion()
      this.getAllSubjectQuestion()

    },
    // tag顔色
    tagColor(tag) {
      if (tag === 'hard') {
        return 'danger'
      } else if (tag === 'easy') {
        return 'success'
      } else if (tag === 'middle') {
        return 'warning'
      }
    },
    // 获得所有题目(根据创建窗口是否打开来判断给谁)
    getAllQuestion() {
      let quetionParamsFlag = null;
      let selectSubjectQuestionListFlag = null;
      if (this.toCreatePaper == true) {
        this.objectLoading = true
        quetionParamsFlag = this.questionParams
        selectSubjectQuestionListFlag = this.selectObjectQuestionList;
      } else {
        this.Loading = true
        quetionParamsFlag = this.updateQuestionParams
        selectSubjectQuestionListFlag = this.updatePaperObj.programmingQuestions.map(question => question.problemId);
      }
      QuestionApi.getAllQuestion(quetionParamsFlag).then(res => {
            if (res.data.success == true) {
              res.data.content.records.forEach(question => {
                if (selectSubjectQuestionListFlag.indexOf(question.problemId) !== -1) {
                  question.selected = true
                } else {
                  question.selected = false
                }
              })
              if (this.toCreatePaper == true) {
                this.AllQuestion = res.data.content.records
                this.questionTotal = res.data.content.total
                this.objectLoading = false
              } else {
                this.AllUpdateQuestion = res.data.content.records
                this.Loading = false
                this.updateQuestionTotal = res.data.content.total
                this.$message.success("获取主观题目信息成功")
              }
            }
          }
      )
    },
    // 获得所有客观题目
    getAllSubjectQuestion() {
      let quetionParamsFlag = null;
      let selectSubjectQuestionListFlag = null;
      if (this.toCreatePaper == true) {
        this.objectLoading = true
        quetionParamsFlag = this.subjectiveQuestionParams
        selectSubjectQuestionListFlag = this.selectSubjectQuestionList;
      } else {
        this.Loading = true
        quetionParamsFlag = this.updateSubjectiveQuestionParams
        selectSubjectQuestionListFlag = this.updatePaperObj.objectiveQuestions.map(question => question.id);
      }
      QuestionApi.getAllSubjectQuestion(quetionParamsFlag).then(res => {
            if (res.data.success == true) {
              res.data.content.records.forEach(question => {
                if (selectSubjectQuestionListFlag.indexOf(question.id) !== -1) {
                  question.selected = true
                } else {
                  question.selected = false
                }
              })
              if (this.toCreatePaper == true) {
                this.AllSubjectQuestion = res.data.content.records
                this.SubjectiveQuestionTotal = res.data.content.total
                this.subjectLoading = false
              } else {
                this.AllUpdateSubjectQuestion = res.data.content.records
                this.Loading = false
                this.updateSubjectiveQuestionTotal = res.data.content.total
              }

              this.$message.success("获取客观题目信息成功")
            } else {
              if (this.toCreatePaper == true) {
                this.SubjectiveQuestionTotal = 0
                this.subjectLoading = false
              } else {
                this.Loading = false
                this.updateSubjectiveQuestionTotal = 0
              }
              this.$message.success("未查询到符合条件的信息")
            }
          }
      ).catch(res => {
        if (this.toCreatePaper == true) {

          this.SubjectiveQuestionTotal = 0
          this.subjectLoading = false
        } else {
          this.Loading = false
          this.updateSubjectiveQuestionTotal = 0
        }
        this.$message.success("未查询到符合条件的信息")

      })
    },
    //获得所有题目标签
    getAllQuestionTag() {
      QuestionApi.getAllQuestionTag().then(res => {
        if (res.data.success == true) {
          this.AllQuestionTag = res.data.content
        }
        console.log(this.AllQuestionCategory)
      })
    },
    // 获得所有题目类别
    getAllQuestionCategory() {
      QuestionApi.getAllQuestionCategory().then(res => {
        if (res.data.success == true) {
          this.AllQuestionCategory = res.data.content
          this.AllQuestionCategory = this.buildTree(this.AllQuestionCategory)
        }
        console.log(this.AllQuestionTag)
      })
          .catch(res => {
            this.$message.error(res)
          })
    },
    //  将所有题目类别转化为树
    buildTree(categories, parent_id = 0) {
      let tree = []
      categories.forEach(category => {
            if (category['problemCategoryParentId'] == parent_id) {
              let node = {
                'value': category['problemCategoryId'],
                'label': category['problemCategoryName'],
              }
              let children = this.buildTree(categories, category['problemCategoryId'])
              if (children) {
                node['children'] = children
              }
              tree.push(node)
            }
          }
      )
      return tree
    },
    // 获取用户信息
    async getUserInfo(param) {
      await UserApi.getUserInfo(param).then(res => {
        if (res.data.success == true) {
          this.userInfoTemp = res.data.content
          if (res.data.content.records.length == 0) {
            const test = {
              records: [
                {username: "创建人查询失败"}
              ]
            }
            Object.assign(this.userInfoTemp, test)
            console.log("测试", this.userInfoTemp)
          }
        }
      }).catch(res => {
        this.$message.error(res)
      })
    },
    // 获取公司信息
    getAllCompanyList() {
      CompanyApi.getAllCompany().then(res => {
        if (res.data.success == true) {
          this.AllCompany = res.data.content
        }
      }).catch(res => {
        this.$message(res)
      })
    },
    //获取某个班级
    async getClassInfo(param) {
      await ClassApi.getClassInfo(param).then(res => {
        if (res.data.success == true) {
          if (res.data.data == null) {
            this.classInfoTemp = {
              className: "班级未搜索到",
            }
          } else {
            this.classInfoTemp = res.data.data
          }
        }
      }).catch(res => {
        this.$message.error(res)
      })
    },
    // 获取班级信息
    getAllClass() {
      ClassApi.getClassInfo(param).then(res => {
        console.log(param)
      })
    },
    // 获得某一张试卷信息
    requestPaperDetail(param) {
      console.log(param)
      Api.paperDetailedInfo(param).then(res => {
        if (res.data.success == true) {
          this.$message.success("获取试卷信息成功")
          // this.paperDetail=res.data.data
          // this.search.paging.totalCount=res.data.totalCount
          this.toViewPaper = true
          this.viwePaper = res.data.data
          console.log(this.viwePaper)
        } else {
          this.$message.error("获取失败")
        }
      }).catch(res => {
        console.log(res)
      })
    },
    // 获得所有的试卷
    async getAllPaper() {
      Api.getExamPaperInfo(this.search).then(async res => {
        if (res.data.success == true) {
          this.$message.success("获取试卷信息成功")
          for (const paper of res.data.data) {
            if (paper.creatorId === null) {
              paper.creatorId = "无创建人"
            } else {
              await this.getUserInfo(paper.creatorId)
              paper.creatorId = this.userInfoTemp.records[0].username
            }
            if (paper.companyId === null) {
              paper.companyId = "无公司"
            } else {
              let conpanyFlag = false
              this.AllCompany.forEach(company => {
                if (paper.companyId == company.id) {
                  paper.companyId = company.name
                  conpanyFlag = true
                }
              })
              if (conpanyFlag == false) {
                paper.companyId = "未搜索到公司"
              }
            }
          }
          this.paperDetail = res.data.data
          this.search.paging.totalCount = res.data.totalCount
          this.paperListLoading = false
          console.log(res.data)
        } else {
          this.$message.error("获取失败")
        }
      }).catch(res => {
        console.log(res)
      })
    }
  },
  // 生命周期 - 创建完成（可以访问当前this 实例）
  setup() {
  },
  mounted() {
    this.getAllPaper()
    this.getAllCompanyList()
  },
  // 生命周期 - 挂载完成（可以访问 DOM 元素）
  onMounted() {
  },
  onBeforeMount() {
  }, // 生命周期 - 挂载之前
  onBeforeUpdate() {
  }, // 生命周期 - 更新之前
  onUpdated() {
  }, // 生命周期 - 更新之后
  onBeforeUnmount() {
  }, // 生命周期 - 销毁之前
  onUnmounted() {
  }, // 生命周期 - 销毁完成
  onErrorCaptured() {
  } // 如果页面有 keep-alive 缓存功能,这个函数会触发
}
</script>

<style scoped>
.category {
  margin-bottom: 30px;
}

.paper {
  width: 100%;
}

.filter-container {
  padding-bottom: 10px;
}

.filter-item {
  display: inline-block;
  vertical-align: middle;
  margin-bottom: 10px;
}

.item-input {
  width: 200px;
  margin-right: 5px;
}

.filter-container .filter-item:nth-child(3), .filter-container .filter-item:nth-child(4) {
  margin-left: 16px;
}

.paper-list {
  width: 100%;
}

.filter-bar {
  width: 100%;
  padding-bottom: 10px;
}

.filter-bar .el-select, .filter-bar .el-input {
  width: 20%;
  margin-right: 20px;
}

.filter-bar .el-progress {
  margin-left: 20px;
}

.filter-bar span {
  margin-left: 10px;
}

.question-table-expand {
  padding: 0 50px;
}

.paper-list .col2-cell-style {
  color: #409EFF;
  cursor: pointer;
}

.el-dialog .paper-container {
  margin: 0 20px;
}

.el-dialog .paper-container .paper-header h1 {
  text-align: center;
  font-size: 2.5em;
}

.el-dialog .paper-container .paper-info {
  text-align: center;
  padding: 20px;
}

.el-dialog .paper-container .paper-info h3 {
  display: inline-block;
  width: 25%;
}

.paper-container .paper-content {
  padding: 20px;
}

.problem-detail .problem-header {
  background-color: #16a085;
  color: #fff;
  padding: 10px;
}

.problem-body {
  padding: 20px;
  background-color: white;
}

.problem-body .border-top-style, .checkpoints {
  border-top: 5px solid #16a085;
  padding-top: 10px;
  margin-top: 30px;
}

.problem-body .border-top-style .description .first-checkpoint {
  border-top-width: 0;
  padding-top: 0;
  margin-top: 0;
}

.problem-body .sample {
  border-top-color: #ff7373;
}

.problem-body .description, .checkpoints-body .description {
  color: #666;
  margin-left: 20px;
}

.problem-detail h4 {
  font-size: 18px;
  margin-top: 4px;
}

.problem-detail h5 {
  font-size: 17px;
}

.problem-detail h6 {
  font-size: 16px;
}

.problem-detail h4, .problem-detail h5, .problem-detail h6 {
  font-weight: 500;
  margin: 10px 0;
  text-transform: uppercase;
}

.problem-detail p {
  margin-bottom: 10px;
}

.problem-detail .sample pre {
  display: block;
  padding: 10px;
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 20px;
  word-break: break-all;
  word-wrap: break-word;
  white-space: pre-wrap;
  background-color: #f5f5f5;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 4px;
}

.el-header {
  background-color: #ffffff;
  color: #333;
  line-height: 60px;

}

.el-aside {
  color: #333;
}

.el-row {
  margin-bottom: 20px;
  background-color: #ffffff;

}

.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #ffffff;
}

.pagination {
  margin: 10px;
}

.question {
  margin-left: 20%;
  margin-right: 20%;
}

.questionText {
  font-size: medium;
}

.questionText::after {
  content: "";
  display: block;
  background: linear-gradient(to right, #ffffff, #f8f9fa);
  width: 100%;
  height: 2px;
}

.questionInfo {
  padding-left: 30px;
  margin-top: -20px;
  background-color: #f8f9fa;
}

.needSubjectiveQuestionNum {
  color: #5FAEFF;
  font-size: 20px;
  font-weight: bold;
}

.example-showcase .el-loading-mask {
  z-index: 9;
}

</style>
